
import React, { SVGProps, useEffect, useState } from "react"
import { $ScientificNotation } from "../../common/utils"
import lessModule from "./index.module.less"

// 主页-svg组件-指标组件
interface svgComponentCardComponentPropsInterface {
    scaleValue: number
    cardList: Array<object>
    rowGeneratrixList: Array<string>
    row14List: Array<string>
    sourceList: Array<object>
}
const SvgComponent_CardComponent: React.FC<svgComponentCardComponentPropsInterface> = (props) => {


    return (
        <div className={`${lessModule["svgComponent-main__svgComponentCardComponent"]}`} style={{ transform: `scale(${props.scaleValue})` }}>

            <div className={`${lessModule["main-svgComponentCardComponent__main"]}`}>
                <>
                    {
                        props.cardList.map((item, idx) => {
                            return (
                                <div className={`${lessModule["svgComponentCardComponent-main__index"]}`} style={{ top: item["top"], left: item["left"] }} key={"dialogList" + idx}>
                                    <>
                                        {
                                            props.rowGeneratrixList.includes(item["name"]) && <>
                                                <div className={`${lessModule["main-index__rowGeneratrix"]}`}>
                                                    <span>总谐波失真：</span>
                                                    {/* <span className={`${lessModule["index-rowGeneratrix__value"]}`}>{$ScientificNotation(20)}%</span> */}
                                                    <span className={`${lessModule["main-index__yellowRow"]}`}>{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.["vol_harmcontent_A"])}%</span>
                                                    <span className={`${lessModule["main-index__greenRow"]}`} style={{margin: "0  10px"}}>{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.["vol_harmcontent_B"])}%</span>
                                                    <span className={`${lessModule["main-index__redRow"]}`}>{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.["vol_harmcontent_C"])}%</span>
                                                </div>
                                                <div className={`${lessModule["main-index__rowGeneratrix"]}`}>
                                                    <span>电压偏差：</span>
                                                    <span className={`${lessModule["main-index__yellowRow"]}`}>{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.["vol_offset_A"])}%</span>
                                                    <span className={`${lessModule["main-index__greenRow"]}`} style={{margin: "0  10px"}}>{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.["vol_offset_B"])}%</span>
                                                    <span className={`${lessModule["main-index__redRow"]}`}>{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.["vol_offset_C"])}%</span>
                                                </div>
                                                <div className={`${lessModule["main-index__rowGeneratrix"]}`}>
                                                    <span>不平衡度：</span>
                                                    <span className={`${lessModule["index-rowGeneratrix__value"]}`}>{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.["vol_unbanlanced"])}%</span>
                                                </div>
                                            </>
                                        }
                                    </>
                                    <>
                                        {
                                            props.row14List.includes(item["name"]) && <>
                                                <div className={`${lessModule["main-index__row14"]} ${lessModule["main-index__yellowRow"]}`}>Ua：{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.["vol_A"],",",5)} kV</div>
                                                <div className={`${lessModule["main-index__row14"]} ${lessModule["main-index__yellowRow"]}`}>la：{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.["cur_A"],",",5)} A</div>
                                                <div className={`${lessModule["main-index__row14"]} ${lessModule["main-index__greenRow"]}`}>Ub：{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.["vol_B"],",",5)} kV</div>
                                                <div className={`${lessModule["main-index__row14"]} ${lessModule["main-index__greenRow"]}`}>lb：{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.["cur_B"],",",5)} A</div>
                                                <div className={`${lessModule["main-index__row14"]} ${lessModule["main-index__redRow"]}`}>Uc：{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.["vol_C"],",",5)} kV</div>
                                                <div className={`${lessModule["main-index__row14"]} ${lessModule["main-index__redRow"]}`}>lc：{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.["cur_C"],",",5)} A</div>
                                            </>
                                        }
                                    </>

                                    <>
                                        {
                                            ![...props.rowGeneratrixList, ...props.row14List].includes(item["name"]) && <>
                                                <>
                                                    {
                                                        item["row12Type"] === "blue" && <>
                                                            <div className={`${lessModule["main-index__row12"]} ${lessModule["main-index__blueRow"]}`}>{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.["cur_A"],",",5)} A</div>
                                                        </>
                                                    }
                                                </>
                                                <>
                                                    {
                                                        !item["row12Type"] && <>
                                                            <div className={`${lessModule["main-index__row12"]} ${lessModule["main-index__yellowRow"]}`}>{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.[`${item["unit"] ? "vol" : "cur"}_A`],",",5)} {item["unit"] ?? "A"}</div>
                                                            <div className={`${lessModule["main-index__row12"]} ${lessModule["main-index__greenRow"]}`}>{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.[`${item["unit"] ? "vol" : "cur"}_B`],",",5)} {item["unit"] ?? "A"}</div>
                                                            <div className={`${lessModule["main-index__row12"]} ${lessModule["main-index__redRow"]}`}>{$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.[`${item["unit"] ? "vol" : "cur"}_C`],",",5)} {item["unit"] ?? "A"}</div>
                                                        </>
                                                    }
                                                </>
                                            </>
                                        }
                                    </>
                                </div>
                            )
                        })
                    }
                </>
            </div>
        </div>

    )

}

// 主页-svg组件-对话框组件
interface svgComponentDialogBoxComponentPropsInterface {
    scaleValue: number
    initDialogBoxList: Array<object>
    sourceList: Array<object>
}
const SvgComponent_DialogBoxComponent: React.FC<svgComponentDialogBoxComponentPropsInterface> = (props) => {
    const [dialogBoxList, setDialogList] = useState<Array<object>>(props.initDialogBoxList)
    const shifting_centre = () => {
        dialogBoxList.forEach((item, idx) => {
            item["deviationLeft"] = -  document.getElementsByClassName(`${lessModule["svgComponentDialogBoxComponent-main__dialogBox"]}`)[idx].clientWidth / 2

        })
        setDialogList([...dialogBoxList])
    }

    useEffect(() => {
        shifting_centre()
    }, [props.sourceList])
    return (
        <div className={`${lessModule["svgComponent-main__svgComponentDialogBoxComponent"]}`} style={{ transform: `scale(${props.scaleValue})` }}>
            <main className={`${lessModule["main-svgComponentDialogBoxComponent__main"]}`}>
                {dialogBoxList.map((item, idx) => {
                    return (
                        <div className={`${lessModule["svgComponentDialogBoxComponent-main__dialogBox"]}`} style={{ top: item["top"], left: item["left"] }} key={"dialogBoxList" + idx}>
                            <div className={`${lessModule["main-dialogBox__deviationBox"]} ${lessModule[`main-dialogBox__deviationBox${item["direction"]}`]}`} style={{ left: item["deviationLeft"] }}>
                                {$ScientificNotation(props.sourceList?.find((data: object) => data["monitor_name"] === item["key"])?.["data"],",",5)} KW
                            </div>
                        </div>
                    )
                })}
            </main>
        </div>
    )
}


// 主页-svg组件
interface $homePageSvgComponentPropsInterface {
    initWidth: number,
    initHeight: number,
    pageName: string
    scaleValue: number
    isSwitch?: boolean
    Svg: React.FC<SVGProps<SVGSVGElement>>
    cardList: Array<object>
    rowGeneratrixList: Array<string>
    row14List: Array<string>
    initDialogBoxList: Array<object>
    sourceList: Array<object>
}
const HomePage_SvgComponent: React.FC<$homePageSvgComponentPropsInterface> = (props) => {
    let [width, setWidth] = useState<number>(0)
    let [height, setHeight] = useState<number>(0)
    const [marginTop, setMarginTop] = useState<number>(0)
    const [marginLeft, setMarginLeft] = useState<number>(0)

    useEffect(() => {
        width = props.initWidth * props.scaleValue
        height = props.initHeight * props.scaleValue
        setWidth(width)
        setHeight(height)
        setMarginTop((document.getElementsByClassName(`${lessModule["homePage-SvgComponent"]}`)[0].clientHeight - height) / 2 > 0 ? (document.getElementsByClassName(`${lessModule["homePage-SvgComponent"]}`)[0].clientHeight - height) / 2 : 0)
        setMarginLeft((document.getElementsByClassName(`${lessModule["homePage-SvgComponent"]}`)[0].clientWidth - width) / 2 > 0 ? (document.getElementsByClassName(`${lessModule["homePage-SvgComponent"]}`)[0].clientWidth - width) / 2 : 0)
    }, [props.scaleValue])
    return (
        <div className={`${lessModule["homePage-SvgComponent"]}`} >
            <main className={`${lessModule["homePage-SvgComponent__main"]}`} style={{ width, height, marginTop, marginLeft }}>
                <props.Svg width={width} height={height} />
                {
                    props.pageName === "变电站供电品质" && <SvgComponent_CardComponent scaleValue={props.scaleValue} cardList={props.cardList} rowGeneratrixList={props.rowGeneratrixList} row14List={props.row14List} sourceList={props.sourceList} />
                }
                {
                    props.pageName === "变电站能耗" && props.isSwitch && <SvgComponent_DialogBoxComponent scaleValue={props.scaleValue} initDialogBoxList={props.initDialogBoxList} sourceList={props.sourceList} />
                }
            </main>
        </div>
    )
}

export default HomePage_SvgComponent
